<template>
	<el-row class="IoSpeakingWriting-box">
		<el-col :span="24" class="IoSpeakingWriting-page">
			<div id="Memory" class="linePage ScaleCSSViewport_unzoom z" v-loading="loading"
				element-loading-spinner="el-icon-loading" element-loading-background="#021033"></div>
		</el-col>
		<el-col :span="24">
			<QMemory :data="propData" />
		</el-col>
	</el-row>
</template>>

<script>
	import {
		fetchData
	} from "@/api/index.js";
	import bus from "common/bus.js";
	import {
		Area
	} from "@antv/g2plot";
	import QMemory from "./basicInfo/Memory.vue";
	export default {
		data() {
			return {
				selectedMonID: "",
				timerName: "ItemMonitorMemoeryAndIo",
				timerEventName: "timerItemMonitorMemoeryAndIo",
				timerInterval: 1000 * 120,

				timerChartName: "ItemMonitorMemoeryInfoChart",
				timerChartEventName: "timerItemMonitorMemoeryInfoChart",
				timerChartInterval: 1000 * 1,

				lineItem: "",
				lineData: [],
				read: "",
				loading: false,
				postData: {
					filters: {
						monid: "",
						ip: "",
					},
				},
				getNum: 120,
				dynamicDataTimer: "",
				propData: {},
				TotalData: [],
				areaWidth: Number((document.body.clientWidth / 2) - 100)
			};
		},
		components: {
			QMemory
		},
		props: {
			initData: null
		},
		created() {
			bus.$emit("timerNewTodo", {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0,
			});

			bus.$on(this.timerEventName, (msg) => {
				if (msg.isGetData) {
					this.initGetData();
				}
			});

			// bus.$emit("timerNewTodo", {
			//   name: this.timerChartName,
			//   eventName: this.timerChartEventName,
			//   interval: this.timerChartInterval,
			//   intervalNow: 0,
			// });

			// bus.$on(this.timerChartEventName, (msg) => {

			//     this.dynamicData();

			// });
		},
		mounted() {
			bus.$on("ItemMonitorInitChart", (msg) => {
				this.resetData();

				this.selectedMonID = msg[0].data.filter((item) => {
					return item.IP.includes(msg[1].IP);
				});
				this.clearTimer();
				bus.$emit("ITEMMONITORMEMORYLINE", {
					USE: "",
					TOTAL_GB: "",
					FREE_GB: "",
					USED_GB: "",
				});
				this.initGetData();
			});
			this.initLine();
		},
		computed: {},
		methods: {
			initGetData() {
				if (this.selectedMonID.length > 0) {
					let _postData = {
						opera: "MemoryUsageLine",
						filters: {
							monid: this.selectedMonID[0].MONID,
							pointNum: this.getNum,
						},
					};

					fetchData({
							postData: JSON.stringify(_postData),
						})
						.then((res) => {
							this.lineData = res.data.map((item) => {
								return {
									Date: item.RECORD_TIME,
									scales: Number((item.USED_PER * 100).toFixed(1)),
									TOTAL_GB: item.TOTAL_GB,

									FREE_GB: item.FREE_GB,
									USED_GB: item.USED_GB,
								};
							});
							this.dynamicData(this.lineData);
							// thisTotalData
						})
						.finally((_) => {
							// this.loading = false;
						});
				} else {
					this.lineItem.changeData([]);
				}
			},
			dynamicData() {
				let data = this.lineData
				if (this.dynamicDataTimers != "") {
					this.clearTimer();
				}
				if (data.length > 0) {
					this.dynamicDataTimer = setInterval((_) => {
						let item = data.shift();
						this.read = item.scales ? Number(item.scales.toFixed(1)) : 0;
						this.propData = {
							USE: this.read,
							TOTAL_GB: item.TOTAL_GB,
							FREE_GB: item.FREE_GB,
							USED_GB: item.USED_GB,
						};
						bus.$emit("ITEMMONITORMEMORYLINE", this.propData);
						data.push(item);
						this.lineItem.changeData(data);



					}, 1000);




				}
			},

			resetData() {
				if (this.lineData.length > 0) {
					this.lineItem.changeData([]);
				}
				this.lineData = [];
				this.read = "";
				this.propData = {};
			},
			initLine() {
				this.lineItem = new Area("Memory", {
					data: this.lineData,
					padding: "auto",
					xField: "Date",
					yField: "scales",
					height: 220,
					// width: this.areaWidth,
					meta: {
						scales: {
							min: 0,
							max: 100,
						},
					},
					xAxis: false,
					areaStyle: () => {
						return {
							fill: "l(270) 0:#ffffff 0.5:#7ec2f3 1:#FF0000",
						};
					},

					tooltip: {
						formatter: (datum) => {
							return {
								name: "使用率",
								value: datum.scales + "%"
							};
						},
					},
				});

				this.lineItem.render();
			},
			clearTimer() {
				clearInterval(this.dynamicDataTimer);
			},
		},
		beforeDestroy() {
			bus.$emit("timerNewTodo", {
				name: this.timerName,
			});
			bus.$emit("timerNewTodo", {
				name: this.timerChartName,
			});
			this.resetData();
			this.lineItem.destroy();
			// this.clearTimer();
			bus.$off("ItemMonitorInitChart");
		},
	};
</script>
<style scoped>
	.IoSpeakingWriting-box {
		/* height: 500px; */
		height: calc(725px / 2 - 58px - 29px - 30px);
		padding: 15px;
		width: 100%;
	}
	
	/* .z{
		height:calc((100vh - 200px)/2);
	} */

	.IoSpeakingWriting-page {
		/* height: 90%; */
		width: 100%;
	}

	.linePage {
		height: calc(725px / 2 - 58px - 29px - 110px );
		width: 100%;
	}

	.IoSpeakingWriting-file {
		height: 10%;
		width: 100%;
		text-align: center;
	}

	.itemName {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 15px;
	}
</style>
